<!-- subpkg_consult/department/index.vue -->
<script lang="ts" setup>
  import { computed, ref } from 'vue'
  import { departmentListApi } from '@/apis/consult'
  import type { DepartData } from '@/types/consult'
  // 接收入参
  const props = defineProps<{
    type: string
    illnessType: string
  }>()
  const departmentList = ref<DepartData[]>([])
  // 接口获取数据
  // 科室列表
  async function getDepartmentList() {
    // 科室列表接口
    const data = await departmentListApi()
    console.log('科室：', data)
    // 渲染列表数据
    departmentList.value = data
  }
  getDepartmentList()

  // 选项卡
  const active = ref(0)
  const onChange = (i: number) => {
    active.value = i
  }
  // 二级科室 计算属性减少缓存
  const childList = computed(() => {
    return departmentList.value[active.value]?.child
  })
</script>

<template>
  <view class="department-page">
    <scroll-view scroll-y class="department-primary">
      <view
        class="department-item"
        v-for="(item, index) in departmentList"
        :key="item.id"
        @click="onChange(index)"
        :class="{ active: active === index }"
        >{{ item.name }}</view
      >
    </scroll-view>
    <scroll-view class="department-secondary">
      <navigator
        hover-class="none"
        :url="`/subpkg_consult/description/description?type=${props.type}&illnessType=${props.illnessType}&depId=${item.id}`"
        class="department-item"
        v-for="item in childList"
        :key="item.id"
        :to="`/subpkg_consult/description/description?type=${props.type}&illnessType=${props.illnessType}&depId=${item.id}`"
      >
        {{ item.name }}
      </navigator>
    </scroll-view>
  </view>
</template>

<style lang="scss">
  @import './index.scss';
</style>
